<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta content="webkit" name="renderer">
    <meta content="IE=edge,chrome=1" http-equiv="x-ua-compatible">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1" name="viewport">
    <link href="../css/layui.css" rel="stylesheet" media="all"/>
</head>
<body>
<br/>
<form class="layui-form" id="myform" style="width: 90%" onsubmit="return false" >
    <div class="layui-form-item">
        <label class="layui-form-label">商品类型</label>
        <div class="layui-input-inline" style="width: 25%">
            <select id="tno" lay-verify="required" name="modules" name="tno">
                <option value="">请选择商品类型</option>
            </select>
        </div>
        <label class="layui-form-label">商品名称</label>
        <div class="layui-input-inline" style="width: 25%">
            <input autocomplete="off" class="layui-input" lay-reqtext="商品不能为空" lay-verify="title" name="gname"
                   placeholder="请输入商品名称" type="text">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">商品价格</label>
        <div class="layui-input-inline" style="width: 25%">
            <input autocomplete="off" class="layui-input" lay-reqtext="价格不能为空" lay-verify="required" name="price"
                   placeholder="请输入商品价格"  type="text">
        </div>
        <label class="layui-form-label">商品库存</label>
        <div class="layui-input-inline" style="width: 25%">
            <input autocomplete="off" class="layui-input" lay-reqtext="库存不能为空" lay-verify="required|number" name="balance"
                   placeholder="请输入商品库存"  type="number">
        </div>
        <label class="layui-form-label">商品单位</label>
        <div class="layui-input-inline" >
            <input autocomplete="off" class="layui-input" lay-reqtext="商品单位不能为空" lay-verify="required" name="unit"
                   placeholder="请输入商品单位"  type="text">
        </div>
    </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品净重</label>
            <div class="layui-input-inline" style="width: 25%">
                <input autocomplete="off" class="layui-input" lay-reqtext="商品净重不能为空" lay-verify="required" name="weight"
                       placeholder="请输入商品净重"  type="text">
            </div>
            <label class="layui-form-label">保质期</label>
            <div class="layui-input-inline" style="width: 25%">
                <input autocomplete="off" class="layui-input" lay-reqtext="商品保质期不能为空" lay-verify="required" name="qperied"
                       placeholder="请输入商品保质期"  type="text">
            </div>
            <label class="layui-form-label">商品图片</label>
            <div class="layui-input-inline" style="width: 200px">
                <input autocomplete="off" class="layui-input" name="pics" type="file" id="pics" onchange="setImagePreviews(this,'showpic')"
                  multiple="multiple"  >
            </div>

        </div>

        <div class="layui-form-item" style="margin-left: 20px" id="showpic"></div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">商品简介</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入内容" class="layui-textarea" name="intro"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">商品详细</label>
                <div class="layui-input-block">
                    <textarea name="goods_form_descr" id="goods_form_descr" rows="30" cols="1000"></textarea>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary" >重置</button>
            </div>
        </div>
</form>

<script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="../js/layui.js"></script>
<script type="text/javascript" src="../js/showpic.js"></script>
<script type="text/javascript" src="../ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="../ckeditor/translations/zh-cn.js"></script>
<script type="text/javascript" src="../js/ajaxfileupload.js"></script>
<script>
    let editor;
    //创建文本编辑器
    ClassicEditor
        .create(document.querySelector('#goods_form_descr'),{
        language:'zh-cn'
    }).then(neweditor=>{
       editor = neweditor;
       console.log(editor);
    }).catch(error=>{
        console.error(error);
    });

    layui.use('form',function () {
        let form = layui.form;
        //发送请求  查询所有的商品类型
        $.get("../../goodtype",{op:'find'},function (rt) {
            if (rt.code==200){
                let str='';
                $.each(rt.data,function (index,item) {
                    str+='<option value="'+item.tno+'">'+item.tname+'</option>';
                });
                $("#tno").append($(str));
            }
            form.render("select");
        },'json');

        // 表单监听提交
        form.on('submit(demo1)', function (data) {
            let obj = data.field; // 获取表单元素的值
            obj.descr = editor.getData();
            obj.tno = $("#tno").val();
            // obj.op = "dofile";

            // 创建 FormData 对象
            var formData = new FormData();

            // 获取文件上传输入框
            var fileInput = document.getElementById('pics');

            // 获取选中的文件列表
            var files = fileInput.files;

            // 将文件列表添加到 FormData 中
            for (var i = 0; i < files.length; i++) {
                formData.append('pics', files[i]);
            }

            // 将其他数据项添加到 FormData
            for (var key in obj) {
                formData.append(key, obj[key]);
            }

            console.log(obj);

            // 发送 AJAX 请求
            $.ajax({
                url: '../../fileadd',
                type: 'POST',
                data: formData, // 使用 FormData
                dataType: 'json',
                contentType: false, // 关闭默认的Content-Type设置
                processData: false, // 禁止自动转换数据格式
                success: function (rt, status) {
                    if (rt.code == 200) {
                        $("#myform")[0].reset(); // 重置表单
                        editor.setData("");
                        layui.form.render();
                        layer.msg("添加成功\n", { icon: 1, time: 2000 });
                        return false;
                    } else {
                        layer.msg('商品信息添加失败，请稍后再试\n', { icon: 2, time: 2000 });
                    }
                },
                error: function (rt, status, e) {
                    layer.msg('商品信息添加失败，请稍后再试\n' + e, { icon: 2, time: 2000 });
                }
            });
        });


// form.on('submit(demo1)', function(data) {
//   let obj = data.field; //获取表单元素得到值
//   obj.descr = editor.getData();
//   obj.tno = $("#tno").val();
//   obj.op = "add";
//   console.log(obj);
//   $.ajax({
//     type: "GET",
//     url: '../../good',
//     data: $.param(obj),
//     dataType: 'json',
//     success: function(rt, status) {
//       if (rt.code == 200) {
//         $("#myform")[0].reset(); //重置表单
//         editor.setData("");
//         layui.form.render();
//         layer.msg("添加成功\n", {
//           icon: 1,
//           time: 2000
//         });
//         return false;
//       }
//       layer.msg('商品信息添加失败，请稍后再试\n', {
//         icon: 2,
//         time: 2000
//       });
//     },
//     error: function(rt, status, e) {
//       layer.msg('商品信息添加失败，请稍后再试\n' + e, {
//         icon: 2,
//         time: 2000
//       });
//     }
//   });
// });
    });
</script>
</body>
</html>